<template>
  <div class="container">
    <div class="form-group">
      <button class="button" @click="getIndustryDefault()">按照行业违约展示</button>
      <button class="button" @click="getIndustryRedo()">按照行业重生展示</button>
      <button class="button" @click="getRegionDefault()">按照地域违约展示</button>
      <button class="button" @click="getRegionRedo()">按照地域重生展示</button>
    </div>
    <div class="box" id="main"></div>
  </div>


</template>

<script>
import * as echarts from 'echarts';

export default {
  name:"PieEcharts",
  data(){
    return{
      chart: null,
      EData : [
        {
          name: '',
          itemStyle: {
            color: '#da0d68'
          },
          children: [
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#dd608d'
              },
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#cb5080'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#b94074'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#a63067'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#94205b'
              }

            }
          ]
        },
        {
          name: '',
          itemStyle: {
            color: '#da1d23'
          },
          children: [
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#df3338'
              },
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#e94a4f'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#e95d62'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#ee7277'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#f3888c'
              }

            }
          ]
        },
        {
          name: '',
          itemStyle: {
            color: '#ebb40f'
          },

          children: [
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#efbe3c'
              },
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#f4ca69'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#f8d595'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#fcdfc3'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#ffeedd'
              }

            }
          ]
        },
        {
          name: '',
          itemStyle: {
            color: '#187a2f'
          },
          children: [
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#219137'
              },
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#2baa44'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#33b752'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#3fc360'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#4acc6d'
              }

            }
          ]
        },
        {
          name: '',
          itemStyle: {
            color: '#0aa3b5'
          },
          children: [
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#19b2c0'
              },
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#28c1cb'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#37d0d6'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#46dfe0'
              }
            },
            {
              name: '',
              value: '',
              itemStyle: {
                color: '#55edeb'
              }

            }
          ]
        }
      ],
      allList:[]
    }
  },

  mounted() {

  },
  methods: {
    async getIndustryDefault(){
      const {data: res} = await this.$http.get('/industryInfo/defaultSituation')
      this.allList=res.data
      for(var i = 0, len = this.EData.length; i < len; i++) {
        console.log(this.EData[i].name);
        this.EData[i].name=this.allList[i].year
        console.log(this.EData[i].children)
        for(var j = 0, leng = this.EData[i].children.length; j < leng; j++) {

          this.EData[i].children[j].name=this.allList[i].classificationList[j].category
          this.EData[i].children[j].value=this.allList[i].classificationList[j].count
          console.log(this.EData[i].children[j].name)
          console.log(this.EData[i].children[j].value)
        }
      }
      this.initChart()
    },

    async getIndustryRedo(){
      const {data: res} = await this.$http.get('/industryInfo/redoSituation')
      this.allList=res.data
      for(var i = 0, len = this.EData.length; i < len; i++) {
        console.log(this.EData[i].name);
        this.EData[i].name=this.allList[i].year
        console.log(this.EData[i].children)
        for(var j = 0, leng = this.EData[i].children.length; j < leng; j++) {

          this.EData[i].children[j].name=this.allList[i].classificationList[j].category
          this.EData[i].children[j].value=this.allList[i].classificationList[j].count
          console.log(this.EData[i].children[j].name)
          console.log(this.EData[i].children[j].value)
        }
      }
      this.initChart()
    },

    async getRegionDefault(){
      const {data: res} = await this.$http.get('/regionInfo/defaultSituation')
      this.allList=res.data
      for(var i = 0, len = this.EData.length; i < len; i++) {
        console.log(this.EData[i].name);
        this.EData[i].name=this.allList[i].year
        console.log(this.EData[i].children)
        for(var j = 0, leng = this.EData[i].children.length; j < leng; j++) {

          this.EData[i].children[j].name=this.allList[i].classificationList[j].category
          this.EData[i].children[j].value=this.allList[i].classificationList[j].count
          console.log(this.EData[i].children[j].name)
          console.log(this.EData[i].children[j].value)
        }
      }
      this.initChart()
    },

    async getRegionRedo(){
      const {data: res} = await this.$http.get('/regionInfo/redoSituation')
      this.allList=res.data
      for(var i = 0, len = this.EData.length; i < len; i++) {
        console.log(this.EData[i].name);
        this.EData[i].name=this.allList[i].year
        console.log(this.EData[i].children)
        for(var j = 0, leng = this.EData[i].children.length; j < leng; j++) {

          this.EData[i].children[j].name=this.allList[i].classificationList[j].category
          this.EData[i].children[j].value=this.allList[i].classificationList[j].count
          console.log(this.EData[i].children[j].name)
          console.log(this.EData[i].children[j].value)
        }
      }
      this.initChart()
    },



    initChart(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      let option = {
        title: {
          text: '各行业每年违约客户统计',
          textStyle: {
            fontSize: 14,
            align: 'center'
          },
          subtextStyle: {
            align: 'center'
          },
          sublink: 'https://worldcoffeeresearch.org/work/sensory-lexicon/'
        },
        series: {
          type: 'sunburst',
          data: this.EData,
          radius: [0, '95%'],
          sort: undefined,
          emphasis: {
            focus: 'ancestor'
          },
          levels: [
            {},
            {
              r0: '15%',
              r: '35%',
              itemStyle: {
                borderWidth: 2
              },
              label: {
                rotate: 'tangential'
              }
            },
            {
              r0: '35%',
              r: '80%',
              label: {
                align: 'right'
              }
            },
            {
              r0: '80%',
              r: '82%',
              label: {
                position: 'outside',
                padding: 3,
                silent: false
              },
              itemStyle: {
                borderWidth: 3
              }
            }
          ]
        }
      };
      myChart.setOption(option)


    }
  },

  created() {
    this.getIndustryDefault()
  }
}

</script>






<style scoped lang="less">
  .container {
    display: flex;
    align-items: flex-start;
    overflow: auto;
  }

  .form-group {
    display: block;
    margin-top: 150px;
    margin-right: 100px;
    margin-left: 50px;
  }
  button {
    display:block;
    width: 250px;
    height:100px;
    padding: 8px 8px;
    border: none;
    border-radius: 5px;
    background-color: #4c5baf;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .box {
    display: inline-block;
    width: 1000px;
    height: 700px;
    background-color: rgb(188, 227, 236);
  }
</style>